<template>
  <el-form ref="form" :model="data" :rules="rules" label-width="100px">
      <el-form-item label="维修类型">
          <el-radio-group v-model="data.type">
          <el-radio :label="1">设备维修单</el-radio>
          <el-radio :label="2">物资维修单</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="所属客户" prop="customer_id">
          <el-select v-model.trim="data.customer_id" placeholder="请选择所属客户"  @change="select_customer" clearable  filterable  class="filter-item" >
              <el-option  v-for="(customer,index) in customer_list"  :key="index" :value="customer.id" :label="customer.name"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="所属项目" prop="project_id">
          <el-select v-model.trim="data.project_id" placeholder="请选择所属项目"  clearable  filterable  class="filter-item" >
              <el-option  v-for="(project,index) in project_list"  :key="index" :value="project.id" :label="project.title"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="设备分类" prop="cate_id">
          <el-cascader
              v-model="data.cate_id"
              @change="select_category"
              :options="category_list" 
          >
          </el-cascader>
      </el-form-item>

     
      <el-form-item label="设备名称" prop="equipment_id">
          <el-select v-model.trim="data.equipment_id" placeholder="请选择设备名称" clearable  filterable  class="filter-item" @change="select_equipment">
              <el-option  v-for="(equipment,index) in equipment_list"  :key="index" :value="equipment.id" :label="equipment.name"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="维修人员" prop="repair_uid">
          <el-select v-model.trim="data.repair_uid" placeholder="请选择维保人员" clearable  filterable  class="filter-item" @change="select_admin">
              <el-option  v-for="(admin,index) in admin_list"  :key="index" :value="admin.id" :label="admin.nickname"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="派工地址" prop="province">
          <el-cascader
          size="large"
          :options="address_options"
          clearable
          filterable
          placeholder="选择地区"
          style="width: 250px; margin-right: 10px"
          v-model="selectedOptions"
          @change="handleAddressChange"
          >
          </el-cascader>
      </el-form-item>

      <el-form-item label="详细地址" prop="address">
          <el-input v-model.trim="data.address" placeholder="请填写设备详细地址" />
      </el-form-item>

      <el-form-item label="维修原因" prop="repair_reason">
          <el-input  type="textarea" v-model.trim="data.repair_reason" :rows="5" placeholder="请填写维修原因" />
      </el-form-item>

      <el-form-item label="维修图片" prop="repair_images">
        <el-upload
          :action="$store.state.settings.file_upload_url"
          :headers="headerObj"
          multiple
          list-type="picture-card"
          :file-list="data.repair_images"
          accept="image/png, image/jpeg, image/gif, image/jpg"
          :on-success="handlerepair_imagesSuccess"
          :on-remove="handledrepair_imagesRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
    </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-check" :disabled="$store.state.settings.ajaxButton" @click="submit">提交</el-button>
      </el-form-item>
  </el-form>
 
</template>

<script>
import { getToken } from '@/utils/auth'
import { create,init_data } from '@/api/maintenance.js' // api接口
import {
provinceAndCityData,
regionData,
provinceAndCityDataPlus,
regionDataPlus,
CodeToText,
TextToCode,
} from "element-china-area-data";

export default {
  name: 'equipmentCreate',
  components: { },
  
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
    customer_list: {
      type: Array,
      default: () => {
        return []
      }
    },
    admin_list: {
      type: Array,
      default: () => {
        return []
      }
    },
    category_list: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      loading:false,
      dialogVisible:false,
      headerObj: {
            'Authorization': 'Bearer ' + getToken()
        },
      rules: {
           customer_id: [ 
                { required: true, message: "请选择所属客户", trigger: "blur" },
            ], 
            project_id: [ 
                { required: true, message: "请选择所属项目", trigger: "blur" },
            ], 
            cate_id: [ 
                { required: true, message: "请选择设备分类", trigger: "blur" },
            ], 
            project_id: [ 
                { required: true, message: "请选择设备所属项目", trigger: "blur" },
            ],


      },
      address_options: regionDataPlus,
      selectedOptions: [],
      project_list: [],
      equipment_list : [],
      data: {
          type:1,
          customer_id:'',
          project_id:'',
          repair_uid:"",
          repair_name:"", // 新增维修人员姓名
          province:"",
          city:"",
          area:"",
          equipment_id:'',
          equipment_name:"", // 新增设备名称
          address:"",
          cate_id:"",
          repair_reason:"",
          repair_images:[],
          repair_imagesfileList:[],
      }
    }
  },
  created() {
  },
  methods: {

    //多图移除
    handledrepair_imagesRemove(file, fileList) {
      const that = this;
      let index = this.data.repair_imagesfileList.findIndex(
        (item) => item.url == file.url
      ); // 要删除的数组下标
      if (index != -1) {
        that.data.repair_imagesfileList.splice(index, 1);
        that.data.repair_images.splice(index, 1);
      }
    },
    //多图上传成功回调
    handlerepair_imagesSuccess(response, file, fileList) {
      this.$store.commit("settings/SET_AJAX_BUTTON", false);
      if (!response.data.src) {
        this.data.repair_imagesfileList = [];
        return this.$message.error(response.msg);
      }
      this.data.repair_images.push(response.data.src);
    },
    //多图上传前回调
    beforerepair_imagesUpload(file) {
      this.$store.commit("settings/SET_AJAX_BUTTON", true);
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG 、PNG格式!");
      }
    },
      select_customer(value) {
        init_data({customer_id:value}).then(response => {
            this.project_list = response.data.projects;
        })
      },
     
      select_category(value) {
        init_data({cate_id:value}).then(response => {
            this.equipment_list = response.data.equipments;
        })
      },

      // 选择设备
      select_equipment(value) {
        const selectedEquipment = this.equipment_list.find(item => item.id === value);
        if (selectedEquipment) {
          this.data.equipment_name = selectedEquipment.name;
        } else {
          this.data.equipment_name = "";
        }
      },

      // 选择维修人员
      select_admin(value) {
        const selectedAdmin = this.admin_list.find(item => item.id === value);
        if (selectedAdmin) {
          this.data.repair_name = selectedAdmin.nickname;
        } else {
          this.data.repair_name = "";
        }
      },

      handleAddressChange(value) {
          let province = CodeToText[value[0]],
          city = CodeToText[value[1]],
          area = CodeToText[value[2]];
          this.data.province = province != "全部" ? province : "";
          this.data.city = city != "全部" ? city : "";
          this.data.area = area != "全部" ? area : "";
      },
    submit() {
      const thiz = this

      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }
        create(this.data).then(response => {
          this.$store.commit('settings/SET_AJAX_BUTTON', true);
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 1500,
            onClose() {
              if (thiz.$refs.form !== undefined) {
                thiz.$refs.form.resetFields()
              }
              thiz.item.dialogVisible = false
            }
          })
        })
      })
    }
  }
}
</script>